Ext
		.define(
				'Project.controller.ProjectController',
				{
					extend : 'Ext.app.Controller',

					views : [ 'project.Navigation', 'project.ContentPanel',
							'project.DescriptionPanel', 'project.Summary',
							'project.Training' ],

					stores : [ 'States' ],

					refs : [ {
						ref : 'navigation',
						selector : 'navigation'
					}, {
						ref : 'contentPanel',
						selector : 'contentPanel'
					}, {
						ref : 'descriptionPanel',
						selector : 'descriptionPanel'
					} ],

					init : function() {
						this.control({
							'descriptionPanel' : {
								render : this.onDescriptionPanelRendered
							},
							'contentPanel' : {
							// resize : 'centerContent'
							},
							'navigation' : {
								selectionchange : 'onNavSelectionChange'
							}
						});
					},

					onDescriptionPanelRendered : function() {
						console.log('The panel was rendered');
					},

					onNavSelectionChange : function(selModel, records) {
						var record = records[0], text = record.get('text'), xtype = record
								.get('id'), alias = 'widget.' + xtype, contentPanel = this
								.getContentPanel(), cmp;

						if (xtype) { // only leaf nodes have ids
							contentPanel.removeAll(true);

							var className = Ext.ClassManager
									.getNameByAlias(alias);
							var ViewClass = Ext.ClassManager.get(className);
							var clsProto = ViewClass.prototype;

							cmp = new ViewClass();
							contentPanel.add(cmp);
							if (cmp.floating) {
								cmp.show();
							} else {
								// this.centerContent();
							}

							contentPanel.setTitle(text);

							document.title = document.title.split(' - ')[0]
									+ ' - ' + text;
							location.hash = xtype;
						}

						console.log('The nav item selected was ' + text);
					},

					centerContent : function() {
						var contentPanel = this.getContentPanel(), body = contentPanel.body, item = contentPanel.items
								.getAt(0), align = 'c-c', overflowX, overflowY, offsets;

						if (item) {
							overflowX = (body.getWidth() < (item.getWidth() + 40));
							overflowY = (body.getHeight() < (item.getHeight() + 40));

							if (overflowX && overflowY) {
								align = 'tl-tl';
								offsets = [ 20, 20 ];
							} else if (overflowX) {
								align = 'l-l';
								offsets = [ 20, 0 ];
							} else if (overflowY) {
								align = 't-t';
								offsets = [ 0, 20 ];
							}

							item.alignTo(contentPanel.body, align, offsets);
						}
					}
				});